This tutorial is a step-by-step guide for you to learn the basic features of HTML-Optimizer Pro. 

Tip: print this out and read it while you're trying the program.

Introduction

This tutorial should be used together with the folder "TestWebFolder" that you find in the HTML-Optimizer Pro program folder. TestWebFolder is a very small fake web folder that holds 3 HTML pages and 2 folders with graphics.
The opening page is Index.html. This page contains intentional errors that you may find by using HTML-Optimizer Pro - see later. The other two pages are 'real pages' that contain rather complex JavaScript code and serve to demonstrate how many bytes you can save by optimizing, without corrupting the code! By the way, if you are currently using some other optimizing program, it's a good idea to test it with these two pages.

If you have not yet added TestWebFolder to the program's Web Folder Menu, please do this now:

1. Select 'Add Web Folder to Web Folder Menu...' from the Configure menu.
2. In the Open Folder Dialog, browse to the HTML-Optimizer Pro folder, select TestWebFolder and press the Choose button.
3. A duplicate of TestWebFolder will be saved in the Optimizer Output folder. This duplicate is named TESTWEBFOLDER, in capitals, to distinguish it from the original folder.

Remember that the idea to work with a duplicate web folder is to protect your original files. The original web folder is for you to work with and the duplicate web folder is for HTML-Optimizer Pro to work with. Of course, you upload your optimized pages from the duplicate web folder!

Optimizing and viewing web pages

1. Launch HTML-Optimizer Pro if it's not open yet and select TestWebFolder in the Web Folder Menu, which is at the bottom of the program's main window.

2. Select 'Entire Web Folder' and then press the Start button. Note that the Select button changes its name to Start because there is no need to make a further selection.

3. In a split second the three web pages are optimized and you see the result in the Log. The optimized files reside in the duplicate web folder, as indicated in the Log's heading when you click on a line in the Log.

4. If you select the line in the Log, the View Code and View Page buttons are activated. Click on View Page.

5. Your browser will open the page and you can check if it renders well after being optimized. You don't need to do that every time but it's nice that you can check it if you like.

6. Return from the browser to HTML-Optimizer Pro and press the View Code button.

7. The Code Field that displays the source code of the page will replace the Log. You can click the small triangle at the left to enlarge the Code Field.
You can edit the text, find and replace text and save the changes. Not something that you will do often, but you should know that you can do it if necessary. You find the usual Edit and Save commands in the Edit and File menu.
If you have edited the text, you will also be prompted to save the changes if you press the Hide Code button or quit the application.

8. Next to the Select button you see the Same Again button but it's dimmed. To enable this button, you select 'File' instead of 'Entire Web Folder' and press the Select button to optimize the page "Index.html" in TestWebFolder. When completed, the Same Again button is available. This is handy because you do not have to evoke the Open Dialog to select the same file again. Just try it by pressing the Same Again button. In a flash the file is optimized again!

9. You might ask what's the use of optimizing the file again. Well, not much, but if you want to perform another action with the same file, you will discover it's very useful indeed. This brings us to the next chapter:

Using another function instead of Optimizing

1. Let's check if the links in the file you just optimized are all valid. Set the Function popup menu to 'Check Internal Links' and press the Same Again button. If the previous page was Index.html, you will discover two bad links, one to "demo.htm" and one to "images/demo.gif".
Note that you can vary the column widths with the scroll bar at the bottom of the Log. This comes in handy if the bad link is so long that the text is condensed and thus difficult to read.

2. To be honest, in some rare cases HTML-Optimizer Pro could flag a bad link while it's perfectly OK. If you come across such a thing, please send the original file to us and report the problem in your email to <bugs@tonbrand.nl>.

3. Now choose the 'Check Tags' function and hit the Same Again button again. If you have not changed the default preferences you will see four lines in the Log reporting a problem.
If you go to the Miscellaneous Tab in Preferences and check 'Check for Deprecated Tags' and 'Check for Missing </P> Tags', press the Save button and then the Same Again button, you will see that we have 6 problems.

3.1. Just a note about the Width and Height attributes. This concerns obviously an IMG SRC tag and you know that adding these attributes help to build the page by the browser much faster. The attributes are added to the Index.html page in the duplicate web folder TESTWEBFOLDER.
For the time being, HTML-Optimizer Pro does not tell you where exactly you can find the detected problems. You have to find out yourself. Try to think of the program as basically being an optimizer and that the extra functions come as a bonus. (It's 'Pro' because it can manage as many web folders - i.e. web sites - as you have in the Web Folder menu).

3.2. Note that if corrections are added to a page, these are added to the duplicate page and that an existing optimized page will be overwritten. This is something you should keep in mind. See the next chapter "Adding missing attributes and converting special characters' for the right procedure.

4. The fourth function to try out is 'Converting Special Characters'. Do this with the Index.html page and see that 4 special characters needed to be converted.
In Preferences you can choose for the (default) # N notation and the Entity notation. You can try both notations and see the difference in the Log. For the browser it does not matter, what you may see proven after having pressed the View Page button.

Adding missing attributes and converting special characters

1. If you have a new web folder with newly developed pages or if you are using this program for the first time, then it's recommended to start with the Check and Convert functions. If corrections took place, they were added to the files in the duplicate web folder. Only if you are satisfied with these corrections, you could copy the corrected pages back to your original web folder. Take care that you do not copy back an optimized page! (An optimized page is difficult to read for humans and would make later editing a hard job. If this ever happens you could try to de-optimize that page by opening it in your HTML Editor and save it again.)

2. For possible later corrections, you may choose to check the Add Missing... options and the Convert option in the first tab of Preferences. In that case, the corrections are added on the fly while optimizing.

Smart Handling

1. If you select 'Smart Handling' and you work with a folder or the entire web folder, only those files will be handled that you have changed. Smart Handling can be date+time sensitive or date (today) sensitive, at choice. You must optimize your entire web folder with the checkbox 'Restore Modification Date' in Preferences checked before you can rely on Smart Handling.

2. Suppose you have optimized your entire web folder that consists of 100 pages. A few weeks later you decide to change 10 pages. You work for a day on these pages and then you start optimizing your entire web folder with Smart Handling turned on. Only these 10 pages will be handled with a single mouse-click!

The History Log

1. In the History Log you find what you have done in the past. For each function there is a separate Log. You can also open the Log with BBEdit - see the File menu.

2. When the Log gets fuller and fuller, it's a good idea to purge it - see the File menu. A full Log will become slower in opening.

Drag & Drop

1. There are two drag & drop possibilities:

1.1. You can drop files on HTML-Optimizer Pro's icon. This will launch the program if it's not open yet and execute the current function.

1.2. You can drop files on the drop spot just above the View Code button.

2. It's not possible to drop folders with content.

3. After having dropped files, you can use the Same Again button as usual.

Synchronizing the duplicate web folder

1. In the Extra menu you find the Synchronize Duplicate Web Folder command that you can also choose to have it executed at each startup of HTML-Optimizer Pro - see the first tab of Preferences, at the bottom.

2. This command allows you to automatically add or refresh files or remove files from the duplicate web folder in accordance with the current state of the original web folder. 

3. This is important because you should consider your duplicate web folder as the core of your actions. It is from there that you upload files. The original web folder is in fact your backup and serves for editing in your HTML Editor.

Conclusion

1. If you have read this tutorial and executed the tests with TestWebFolder, you know enough to get started. There are of course more things to discover and to explain, but that you will experience while you're actually working with HTML-Optimizer Pro.

2. For more information you have the Manual, built into the program and as separate HTML file. We strongly recommend that you read it once; it's not that long and it may give you hints you would not have thought of.

3. If you ever come across a problem that you cannot solve, don't hesitate to ask for our free support. You can mail to <support@tonbrand.nl> or go to the Support page of our web site.

Enjoy!